<template>
	<view class="container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-header">
				<image class="user-avatar" :src="userInfo.avatar" @tap="onEditProfile"></image>
				<view class="user-info">
					<text class="user-name">{{ userInfo.name }}</text>
					<text class="user-location">{{ userInfo.location }}</text>
				</view>
				<view class="edit-btn" @tap="onEditProfile">
					<image class="edit-icon" src="/static/edit.svg"></image>
				</view>
			</view>
			
			<view class="user-stats">
				<view class="stat-item">
					<text class="stat-value">{{ userInfo.coins }}</text>
					<text class="stat-label">学币</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-value">{{ userInfo.studyDays }}</text>
					<text class="stat-label">学习天数</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view 
				v-for="item in menuItems" 
				:key="item.id"
				class="menu-item"
				:data-id="item.id"
				@tap="onMenuTap"
			>
				<view class="menu-icon" :style="{ backgroundColor: item.color }">
					<image :src="item.icon" class="icon-image"></image>
				</view>
				<text class="menu-title">{{ item.title }}</text>
				<view class="menu-right">
					<view v-if="item.badge" class="menu-badge">{{ item.badge }}</view>
					<image class="arrow-icon" src="/static/arrow-right.svg"></image>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<bottom-navigation current-page="profile" @navigate="onNavigate"></bottom-navigation>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: '/static/avatar.png',
					name: '爱学习的西西',
					location: '北京 · 六年级',
					coins: 23000,
					studyDays: 65
				},
				menuItems: [
					{
						id: 'footprint',
						icon: '/static/footprint.svg',
						title: '我的足迹',
						color: '#4285f4'
					},
					{
						id: 'download',
						icon: '/static/download.svg',
						title: '我的下载',
						color: '#ea4335'
					},
					{
						id: 'collection',
						icon: '/static/collection.svg',
						title: '我的收藏',
						color: '#fbbc04'
					},
					{
						id: 'questions',
						icon: '/static/questions.svg',
						title: '我的错题',
						color: '#9c27b0'
					},
					{
						id: 'message',
						icon: '/static/message-center.svg',
						title: '消息中心',
						color: '#00bcd4',
						badge: 1
					},
					{
						id: 'help',
						icon: '/static/help.svg',
						title: '帮助与反馈',
						color: '#ff9800'
					},
					{
						id: 'settings',
						icon: '/static/settings.svg',
						title: '账号设置',
						color: '#ff5722'
					}
				]
			}
		},
		onLoad: function (options) {
			console.log('个人中心页面加载');
		},
		onShow: function () {
			console.log('个人中心页面显示');
		},
		methods: {
			// 点击菜单项
			onMenuTap: function(e) {
				const itemId = e.currentTarget.dataset.id;
				console.log('点击菜单项:', itemId);
				
				switch(itemId) {
					case 'message':
						uni.navigateTo({
							url: '/pages/message/message'
						});
						break;
					case 'footprint':
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
						break;
					case 'download':
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
						break;
					case 'collection':
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
						break;
					case 'questions':
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
						break;
					case 'help':
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
						break;
					case 'settings':
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
						break;
					default:
						console.log('未知菜单项');
				}
			},
			// 编辑个人信息
			onEditProfile: function() {
				uni.showToast({
					title: '编辑功能开发中',
					icon: 'none'
				});
			},
			// 全局导航栏导航事件
			onNavigate: function(e) {
				const page = e.detail.page;
				console.log('导航到页面:', page);
				
				// 这里可以添加页面特定的导航逻辑
				// 组件内部已经处理了页面跳转
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f8fafc;
		padding-bottom: 90px; /* 为底部导航栏留出空间 */
	}

	.user-card {
		background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
		margin: 20px;
		border-radius: 20px;
		padding: 24px;
		box-shadow: 0 8px 32px rgba(255, 107, 53, 0.2);
	}

	.user-header {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.user-avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		border: 4px solid rgba(255, 255, 255, 0.3);
		margin-right: 16px;
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.user-name {
		font-size: 24px;
		font-weight: 700;
		color: white;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.user-location {
		font-size: 16px;
		color: rgba(255, 255, 255, 0.9);
		font-weight: 500;
	}

	.edit-btn {
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10px);
		transition: all 0.3s ease;
	}

	.edit-btn:active {
		transform: scale(0.95);
		background: rgba(255, 255, 255, 0.3);
	}

	.edit-icon {
		width: 20px;
		height: 20px;
		filter: brightness(0) invert(1);
	}

	.user-stats {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 16px;
		padding: 16px 20px;
		backdrop-filter: blur(10px);
	}

	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}

	.stat-value {
		font-size: 24px;
		font-weight: 700;
		color: white;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.stat-label {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.9);
		font-weight: 500;
	}

	.stat-divider {
		width: 1px;
		height: 40px;
		background: rgba(255, 255, 255, 0.3);
		margin: 0 20px;
	}

	.menu-section {
		background: white;
		margin: 0 20px;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 20px;
		border-bottom: 1px solid #f1f5f9;
		background: white;
		transition: background-color 0.2s ease;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-item:active {
		background: #f8fafc;
	}

	.menu-icon {
		width: 48px;
		height: 48px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.icon-image {
		width: 24px;
		height: 24px;
		filter: brightness(0) invert(1);
	}

	.menu-title {
		flex: 1;
		font-size: 16px;
		font-weight: 500;
		color: #1f2937;
	}

	.menu-right {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.menu-badge {
		background: #ef4444;
		color: white;
		font-size: 12px;
		font-weight: 600;
		padding: 2px 8px;
		border-radius: 10px;
		min-width: 18px;
		text-align: center;
		line-height: 1.2;
	}

	.arrow-icon {
		width: 16px;
		height: 16px;
		opacity: 0.4;
	}
</style>


